<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>video</title>
	<link rel="stylesheet" type="text/css" href="./css/init.css" />
	<link rel="stylesheet" type="text/css" href="./css/main.css" />
	<script src="./js/jquery-2.1.4-min.js"></script>
	<script src="./js/main.js"></script>
</head>
<body>
	<div class="video">
		<video id="video" src="./video/video1.mp4">
			<track kind="subtitles" src="./video/es.vtt" srclang="zh" label="Chinese" default>
			<track kind="subtitles" src="./video/en.vtt" srclang="en" label="English">
		</video>
		<div class="videoBottom">
			<div class="videoProgress">
				<div class="progressBlank"></div>
				<div class="progressList">
					<div class="playProgress"></div>
					<div class="loadProgress"></div>
					<div class="hoverProgress"></div>
				</div>
			</div>
			<div class="videoBtn">
				<div class="videoLeftBtn">
					<a href="javascript:;" class="vbtn playpause pause">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z">
								<animate attributeName="d" calcMode="linear" fill="freeze" from="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" to="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" dur="1s" begin="indefinite" repeatCount="1"/>
							</path>
						</svg>
					</a>
					<a href="javascript:;" class="vbtn next">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="M 12,24 20.5,18 12,12 V 24 z M 22,12 v 12 h 2 V 12 h -2 z">
							</path>
						</svg>
					</a>
					<div class="vbtn volume">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="volumeSvg1" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="M8,21 L12,21 L17,26 L17,10 L12,15 L8,15 L8,21 Z">
							</path>
							<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="volumeSvg2" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
								<path d="M 26.11,15.73 24.85,14.5 22.52,16.76 20.20,14.5 18.94,15.73 21.26,18 18.94,20.26 20.20,21.5 22.52,19.23 24.85,21.5 26.11,20.26 23.79,18 l 2.32,-2.26 0,0 z">
								</path>
							</svg>
						</svg>
						<div class="volumeLine">
							<div class="volumePanel cf">
							</div>
						</div>
					</div>
					<div class="vbtn time"><span class="curr"></span>/<span class="dura"></span></div>
				</div>
				<div class="videoRightBtn">
					<a href="javascript:;" class="vbtn subtitle">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="M11,11 C9.9,11 9,11.9 9,13 L9,23 C9,24.1 9.9,25 11,25 L25,25 C26.1,25 27,24.1 27,23 L27,13 C27,11.9 26.1,11 25,11 L11,11 Z M11,17 L14,17 L14,19 L11,19 L11,17 L11,17 Z M20,23 L11,23 L11,21 L20,21 L20,23 L20,23 Z M25,23 L22,23 L22,21 L25,21 L25,23 L25,23 Z M25,19 L16,19 L16,17 L25,17 L25,19 L25,19 Z">
							</path>
						</svg>
					</a>
					<a href="javascript:;" class="vbtn setting">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z">
							</path>
						</svg>
					</a>
					<a href="javascript:;" class="vbtn theater theatre">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z">
							</path>
						</svg>
					</a>
					<a href="javascript:;" class="vbtn full fullScreen">
						<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
							<path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z">
							</path>
							<path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z">
							</path>
							<path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z">
							</path>
							<path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z">
							</path>
						</svg>
					</a>
				</div>
			</div>
		</div>
		<div class="settingDialog">
			<div class="sdMain">
				<div class="sdItem autoPlay">
					<div class="sdItemLabel">
						自动播放
					</div>
					<div class="sdItemContent hasCheck">
						<div class="checkbox"></div>
					</div>
				</div>
				<div class="sdItem annotation">
					<div class="sdItemLabel">
						注释
					</div>
					<div class="sdItemContent hasCheck">
						<div class="checkbox"></div>
					</div>
				</div>
				<div class="sdItem speed">
					<div class="sdItemLabel">
						速度
					</div>
					<div class="sdItemContent narrowRight">
						正常
					</div>
				</div>
				<div class="sdItem quality">
					<div class="sdItemLabel">
						画质
					</div>
					<div class="sdItemContent narrowRight">
						<span>自动</span>
						<em>360p</em>
					</div>
				</div>
				<div class="sdItem caption">
					<div class="sdItemLabel">
						<span>字幕</span>
						<em>(01)</em>
					</div>
					<div class="sdItemContent narrowRight">
						英文(自动生成)
					</div>
				</div>
			</div>
			<div class="speedDialog">
				<div class="sdItem">
					<div class="sdItemContent">
						速度
					</div>
				</div>
				<div class="sdItem">
					<div class="sdItemContent sel">
						0.25
					</div>
				</div>
				<div class="sdItem">
					<div class="sdItemContent sel">
						0.5
					</div>
				</div>
				<div class="sdItem">
					<div class="sdItemContent sel">
						正常
					</div>
				</div>
				<div class="sdItem">
					<div class="sdItemContent sel">
						1.25
					</div>
				</div>
				<div class="sdItem">
					<div class="sdItemContent sel">
						1.5
					</div>
				</div>
				<div class="sdItem">
					<div class="sdItemContent sel">
						2
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- <canvas style="width:854px;height:480px;"></canvas> -->
</body>
</html>
